<template>
    <div class="footer-bar">
        <div class="bar-left" @click="checkAll">
            <image resize="stretch" class="check-img" :src="checkedAll ? checkedImg : unCheckedImg"></image>
            <text class="check-all-txt font-msyhl">全选</text>
        </div>

        <div class="bar-right-wrapper">
            <!--编辑-->
            <div class="bar-right" v-if="isEditShow">
                <text class="del-all-btn font-msyhl" @click="delEdit">删除</text>
            </div>

            <!--结算-->
            <div class="bar-right" v-else>
                <div class="total-wrapper">
                    <text class="total-txt font-msyhl">合计：</text>
                    <text class="total-price font-msyhl">{{totalCheckedMoney | currency('¥')}}</text>
                    <text class="total-txt total-discount font-msyhl">（不含运费）</text>
                </div>

                <btn-item v-if="totalCheckedNum > 0" @btnClick="goToConfirm">结算({{totalCheckedNum}})</btn-item>
                <btn-item v-else :disabled="true">结算</btn-item>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .footer-bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 1080px;
        height: 100px;
        background-color: #f2f2f2;
        opacity: 0.9;
        padding-left: 20px;
        padding-right: 20px;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        border-top-width: 1px;
        border-color: #d0d0d0;
    }
    .bar-left {
        flex-direction: row;
        align-items: center;
    }
    .check-img {
        width: 35px;
        height: 35px;
        margin-right: 6px;
    }
    .check-all-txt {
        font-size: 30px;
        color: #313131;
    }
    .bar-right-wrapper {
        flex: 1;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .bar-right {
        flex: 1;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .del-all-btn {
        width: 180px;
        height: 70px;
        line-height: 70px;
        border-width: 1px;
        border-color: #e31336;
        text-align: center;
        font-size: 36px;
        color: #e31336;
        border-radius: 6px;
    }
    .total-wrapper {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-right: 12px;
    }
    .total-txt {
        font-size: 28px;
        color: #313131;
    }
    .total-price {
        font-size: 36px;
        color: #313131;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>

<script>
    import checkedImg from 'assets/images/checked-circle.png';
    import unCheckedImg from 'assets/images/unchecked-circle.png';
    import btnItem from 'components/btn-item/btn-item.vue';

    export default{
        props: {
            isEditShow: { //购物车是否编辑状态
                type: Boolean,
                default: false
            },
            checkedAll: {
                type: Boolean,
                default: true
            },
            totalCheckedMoney: {
                type: String,
                default: 0
            },
            totalCheckedNum: {
                type: String,
                default: 0
            }
        },
        data(){
            return{
                checkedImg: checkedImg,
                unCheckedImg: unCheckedImg
            }
        },
        methods: {
            /*全选*/
            checkAll(){
                this.$emit("checkAll");
            },
            /*勾选删除*/
            delEdit(e){
                this.$emit("delEdit",e);
            },
            /*结算*/
            goToConfirm(e) {
                this.$emit("goToConfirm",e);
            }
        },
        components: {
            'btn-item': btnItem
        }
    }
</script>
